<template>
  <a-row :gutter="30">
    <% filters.map(item => { _%> 
		  <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6">
				<% if(item.component === "select") { %>
				<a-form-item label="<%= item.label %>">
					<a-select
						v-model:value="model.filterForm.<%= item.key %>"
						:options="model.options.<%= item.key %>"
						placeholder="<%= item.placeholder %>"
						allow-clear
					></a-select>
				</a-form-item>
				<% } _%> 
				<% if(item.component === "input") { _%>
				<a-form-item label="<%= item.label %>">
					<a-input
						v-model:value="model.filterForm.<%= item.key %>"
						placeholder="<%= item.placeholder %>"
						allow-clear
					></a-input>
				</a-form-item>
				<% } _%> 
				<% if(item.component === "range-picker") { _%>
				<a-form-item label="<%= item.label %>">
					<a-range-picker
						v-model:value="model.filterForm.<%= item.key %>"
						valueFormat="YYYY-MM-DD"
						:allowClear="false"
					/>
				</a-form-item>
				<% } _%> 
			</a-col>
		<% }) _%>
		<a-col style="text-align: right; flex: 1">
			<a-space>
				<a-button @click="presenter.handleClear">重置</a-button>
        <a-button @click="presenter.handleSearch" type="primary">查询</a-button>
        <a-button @click="presenter.handleCreate" type="primary">
          <template #icon><PlusOutlined /></template>
          新增
        </a-button>
			</a-space>
		</a-col>
  </a-row>
  <a-table
    :loading="model.loading.list"
    :columns="columns"
    :data-source="model.tableList.value"
    :pagination="false"
  >
	<% columns.filter(item => item.slot).map((item, index) => { _%>
		<template #<%= item.key %>="{ record }">
			{{ record.<%= item.key %> }}
		</template>
		<% }) _%>
		<template #operation="{ record }">
			<a-space :size="0">
				<% if(includeModifyModal) { _%>
				<a-button
					type="link"
					size="small"
					@click="
						() => {
							presenter.handleView(record);
						}
					"
				>
					查看
				</a-button>
				<% } _%>
				<a-button
					type="link"
					size="small"
					@click="
						() => {
							presenter.handleEdit(record);
						}
					"
				>
					编辑
				</a-button>
				<a-button
					type="link"
					danger
					size="small"
					@click="
						() => {
							presenter.handleDel(record);
						}
					"
				>
					删除
				</a-button>
			</a-space>
		</template>
  </a-table>
  <% if(pagination.show) { _%>
  <a-pagination
    style="margin-top: 10px"
    @change="presenter.handlePageChange"
		@showSizeChange="presenter.handlePageChange"
    v-model:current="model.pagination.page"
    :total="model.pagination.total"
    show-size-changer
    show-quick-jumper
  ></a-pagination>
  <% } _%> <% if(includeModifyModal) { _%>
  <ModifyModal
    :id="model.modalInfo.id"
    :title="model.modalInfo.title"
    :visible="model.modalInfo.visible"
    :action="model.modalInfo.action"
    @ok="presenter.handleModalOk"
    @cancel="presenter.handleModalCancel"
  ></ModifyModal>
  <% } _%>
</template>
<script lang="ts" setup>
  import { PlusOutlined } from "@ant-design/icons-vue";
  <% if(includeModifyModal) { _%>
  import ModifyModal from "./ModifyModal/index.vue";
  <% } _%>
  import { usePresenter } from "./presenter";

  const presenter = usePresenter();
  const { model } = presenter;

  const columns = [
    <% columns.map((item, index) => { _%>
  		{
        title: "<%= item.title || `column${index+1}` %>",
  			dataIndex: "<%= item.dataIndex || `column${index+1}` %>",
  			key: "<%= item.key || `column${index+1}` %>",
  			<% if(item.width) {%>width: "<%= item.width %>",<% } _%>
				<% if(item.slot) {%>slots: { customRender: "<%= item.key %>"},<% } _%>
  		},
  	<% }) _%>
  	{
      title: "操作",
      key: "operation",
  		width: 100,
			slots:{customRender: "operation"}
    }
  ];
</script>
